<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="layui/layui.js" media="all">

    <link rel="stylesheet" type="text/css" href="css/login.css" media="all">


</head>
<body>

<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
    <h1>
        <strong>如家酒店管理系统</strong>
        <em>Management System</em>
    </h1>
    <div class="layui-user-icon larry-login">
        <input type="text" placeholder="用户名" name="login_name" class="login_txtbx"/>
    </div>
    <div class="layui-pwd-icon larry-login">
        <input type="password" placeholder="密码" name="login_pass" class="login_txtbx"/>
    </div>

    <div class="layui-submit larry-login">
        <input type="button" id="loginbtn" value="立即登录" class="submit_btn"/>
    </div>
    <div class="layui-login-text">
        <p>© 2021-2022 Zhou 版权所有</p>
        <p>鲁A-20210520-1 <a href="https://gitee.com/zxt_code/" title="">zxt_code.com</a></p>
    </div>
</div>
<script type="text/javascript" src="layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="lib/layui/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/jparticle.jquery.js"></script>
<script type="text/javascript">
    var $ = layui.$;
    var layer = layui.layer;
    $("#loginbtn").click(function () {
        var formdata = {};//js对象--准备提交的数据
        var name = $("[name='login_name']").val();
        var pass = $("[name='login_pass']").val();
        //验证数据
        //正则表达式
        var reg = /^\w{4,16}$/;
        if (reg.test(name) && reg.test(pass)) {
            //准备数据提交数据
            formdata = {
                'login_name': name,
                login_pass: pass
            }
            $.ajax({
                url: '/dologin',
                data: formdata,
                success: function (result) {
                    //result是后台处理完成后，返回给前台的JSON对象
                    if (result) {
                        //登录成功，跳转到主页面
                        top.location.href = "main.html";
                    } else {

                        layer.msg("登录失败，请重新登录！", {
                            icon: 2
                        });
                    }

                }

            });

        } else {
            //提示重新填写
            layer.msg("账号和密码必须是4-16位数字字母_", {
                icon: 2
            });
        }
    });


    $(function () {
        $(".layui-canvs").jParticle({
            background: "#141414",
            color: "#E6E6E6"
        });


    });
</script>
<script>
    $.ajax({
        url: '/login',
        success: function (result) {
            //result是后台处理完成后，返回给前台的JSON对象
            if (result) {
                //登录失败，跳转到登录页面
  
                layer.open({
                    title: '登录拦截',
                    offset: 'auto'
                    , content: '不可访问内部数据，如要访问的话请登录！'
                });
            } else {

                layer.open({
                    title: '登录拦截',
                    offset: 'auto'
                    , content: '尊敬的用户，请登录！'
                });
            }

        }

    });
</script>
</body>
</html>